<template>
  <div class="search-bar">
      <el-radio-group v-model="type" @change="changeType">
        <el-radio-button v-for="(item,index) in initData.types" :key="index" :label="item.id">{{item.name}}</el-radio-button>
      </el-radio-group>
      <air-monitor ref="airMonitor" v-if="type == 'airMonitor'"/>
      <live-weather ref="liveWeather" v-if="type == 'liveWeather'" />
      <pollutant-source ref="pollutantSource" v-if="type == 'pollutantSource'" />
  </div>

</template>
<script>
import airMonitor from './airMonitor';
import liveWeather from './liveWeather';
import pollutantSource from './pollutantSource';
import {city,cityId,cityPinyin,geoserver} from '@/config/env';
export default {
  components:{
    airMonitor,
    liveWeather,
    pollutantSource
  },
  data(){
    return{
      type: 'liveWeather',
      initData:{
        types:[
          {id: 'airMonitor', name: '空气质量', layers: ['air-monitor']},
          {id: 'liveWeather', name: '实况气象', layers: ['live-weather-layer','live-weather-label','live-weather-source']},
          {id: 'pollutantSource', name: '污染排放', layer: ['station-layer', 'circle', 'station_emis_circle', 'stations_inventory_' + cityPinyin, 'stations_inventory_circle_'+cityPinyin]},
        ]
      },
      map: null,
      marker: null,
      layers:[
        'air-monitor',
        'live-weather-layer', 
        'live-weather-label', 
        'live-weather-source',
        'station-layer',
        'circle',
        'station_emis_circle',
        'stations_inventory_' + cityPinyin,
        'stations_inventory_circle_'+cityPinyin
      ]
    }
  },
  methods:{
    changeType(val){      
      this.removeLayer();
      this.$refs[val].getList(this.map);
    },
    removeLayer(){
      this.layers.forEach(item => {
        if (this.map.getLayer(item)) this.map.removeLayer(item);
        if (this.map.getSource(item)) this.map.removeSource(item);  
      });      
    },
    getMap(map){
      this.map = map;
      // this.removeLayer();
      // this.$refs[this.type].getList(map);
    },
  }
}

</script>